<template>
  <div class="side-menu">
    <!-- 固定菜单项 -->
    <div class="menu-items">
      <div class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="onSideMenu(item)">
        <div class="icon">
          <i :class="item.icon?item.icon:'el-icon-set-up'"></i>
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>

    <!-- 返回顶部按钮 -->
    <div class="back-to-top"
         v-show="showBackTop"
         @click="scrollToTop">
      <i class="el-icon-top"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SideMenu',
  data() {
    return {
      showBackTop: false,
      menuItems: [{
        icon: 'el-icon-s-home',
        name: '首页',
        event: 2,
        path: '/',
      }].concat(this.$cache.getItem("rightCategory"))
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    onSideMenu(item) {
      if (item.path) {
        if (item.event == 2) {
          this.$router.push({path: item.path});
        } else if (item.event == 1) {
          window.open(item.path, '_blank');
        }
      } else {
        console.log('跳转参数为空')
      }
    },
    handleScroll() {
      this.showBackTop = window.pageYOffset > 300
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.side-menu {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-item {
  width: 50px;
  height: 50px;
  background: var(--card-bg);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 10px var(--shadow-color);
}

.menu-item:hover {
  transform: translateY(-3px);
  background: var(--primary-color);
  color: white;
}

.icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.text {
  font-size: 12px;
}

.back-to-top {
  width: 50px;
  height: 50px;
  background: var(--card-bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 10px var(--shadow-color);
  margin-top: 10px;
}

.back-to-top:hover {
  transform: translateY(-3px);
  background: var(--primary-color);
  color: white;
}

@media (max-width: 768px) {
  .side-menu {
    right: 10px;
    bottom: 80px;
  }

  .menu-item, .back-to-top {
    width: 40px;
    height: 40px;
  }

  .icon {
    font-size: 16px;
  }

  .text {
    font-size: 10px;
  }
}
</style>
